<template>
  <div class="app-container">
<!--    定义一个文本类型的按钮，当点击该按钮时，将触发一个名为dialog的变量变为true的操作，按钮显示文本为“好高级搜索”-->
    <el-button type="text" @click="dialog = true">高级搜索</el-button>
<!--    el-drawer组件用于创建一个可弹出的抽屉式面板，用于展示高级搜索的表单内容-->
    <el-drawer
      title="高级搜索"
      :visible.sync="dialog"
      direction="ttb"
      style="height: 1100px"
      custom-class="demo-drawer"
      ref="drawer">
<!--      在抽屉式面板内部定义一个div，作为内容区域-->
      <div class="demo-drawer__content">
<!--        el-form组件用创建表单，绑定数据模型为queryParams-->
        <el-form :model="queryParams">
<!--          el-row组件用于创建行布局，设置了列间距为20pox-->
          <el-row :gutter="20">
<!--            el-col组件用于创建列布局，这里设置列的跨度为6，表示占据一行的六分之一宽度-->
            <el-col :span="6">
              <el-form-item label="广告标题">
                <el-input v-model="queryParams.title" style="width: 200px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公告类型">
                <el-select v-model="queryParams.client" clearable>
                  <el-option label="系统通知" value="1"></el-option>
                  <el-option label="活动通知" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="语言类型">
                <el-select v-model="queryParams.languagetype" clearable>
                  <!-- 这里通过v-for指令遍历dict.type.sys_languagetype数组，为每个元素创建一个el-option选项 -->
                  <!-- :key属性用于为每个选项提供一个唯一标识，:label和:value属性分别绑定元素的label和value属性 -->
                  <el-option
                    v-for="dict in dict.type.sys_languagetype"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="客户端">
                <el-select v-model="queryParams.client" clearable>
                  <el-option
                    v-for="dict in dict.type.sys_client"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态">
                <el-select v-model="queryParams.status" clearable>
                  <el-option label="生效中" value="1"></el-option>
                  <el-option label="已下架" value="2"></el-option>
                  <el-option label="已过期" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
<!--        在抽屉式面板内容区的底部定义一个div，作为表单的底部操作区域-->
        <div class="demo-drawer__footer">
<!--          el-button组件用于创建按钮，点击该按钮将触发cancelForm方法-->
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="getList()" :load="load">搜索</el-button>
        </div>
      </div>
    </el-drawer>

    <div class="aaa">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['other:bulletin:add']"
          >新增</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    </div>

    <el-table v-loading="loading" :data="bulletinList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="公告类型" align="center" prop="bulletintype">
        <template slot-scope="scope">
          {{scope.row.bulletintype==1?'系统通知':'活动通知'}}
        </template>
      </el-table-column>
      <el-table-column label="公告标题" align="center" prop="title" />
      <el-table-column label="客户端" align="center" prop="client" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_client" :value="scope.row.client"/>
        </template>
      </el-table-column>
      <el-table-column label="语言类型" align="center" prop="languagetype" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_languagetype" :value="scope.row.languagetype"/>
        </template>
      </el-table-column>
      <el-table-column label="推送时间" align="center" prop="pushtime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.pushtime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="creationtime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.creationtime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          {{scope.row.status==1?'生效中':scope.row.status==2?'已下架':'已过期'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.status==2"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate1(scope.row)"
          >上架</el-button>
          <el-button
            v-show="scope.row.status==1"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate1(scope.row)"
          >下架</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['other:bulletin:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改广播公告对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="客户端">
          <el-radio-group v-model="form.client">
            <el-radio v-for="dict in dict.type.sys_client"
            :key="dict.value"
            :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="公告类型">
          <el-radio-group v-model="form.bulletintype">
            <el-radio v-for="b in dict.type.sys_bulletintype"
                      :key="b.value"
                      :label="b.value">{{ b.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="语言类型">
          <el-radio-group v-model="form.languagetype">
            <el-radio v-for="a in dict.type.sys_languagetype"
                      :key="a.value"
                      :label="a.value">{{ a.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="form.title" placeholder="请填写标题" />
        </el-form-item>

        <el-form-item label="广播内容">
          <el-input v-model="form.broadcastcontent" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="推送方式">
          <el-radio-group v-model="form.pushmethod">
            <el-radio v-for="c in dict.type.sys_pushmethod"
                      :key="c.value"
                      :label="c.value">{{ c.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推送时间" prop="pushtime">
          <el-date-picker clearable
                          v-model="form.pushtime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择推送时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBulletin, getBulletin, delBulletin, addBulletin,updatasstatus } from "@/api/other/bulletin";

export default {
  name: "Bulletin",
  dicts: ['sys_client','sys_languagetype','sys_bulletintype','sys_pushmethod'],
  data() {
    return {
      // 高级搜索的遮罩层
      dialog: false,
      load:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 广播公告表格数据
      bulletinList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bulletintype: null,
        title: null,
        client: null,
        pushtime: null,
        languagetype: null,
        creationtime: null,
        status: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 处理广播公告上/下架操作的方法，接收要操作的行数据（row）作为参数
    handleUpdate1(row) {
      // 弹出确认框，询问用户是否确定上/下架广播公告，设置确认按钮文本、取消按钮文本以及提示框类型为警告
      this.$confirm('您确定上/下架广播公告么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果用户点击确认，调用updatasstatus函数（假设这里是用于更新公告状态的异步操作函数）并传入要操作的行数据（row）
        // 然后处理更新操作成功后的逻辑
        updatasstatus(row).then(res=>{
          // 弹出成功提示消息，告知用户修改成功
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          // 调用getList方法重新获取广播公告列表，以刷新页面显示最新数据
          this.getList();
        })
      }).catch(() => {
        // 如果用户点击取消，弹出信息提示消息，告知用户已取消修改操作
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },


    // 取消表单相关操作的方法，比如关闭弹出框、停止加载状态等
    cancelForm() {
      // 将加载状态（load）设置为false，可能用于控制页面上某个加载动画或者按钮的禁用/启用状态
      this.load = false;
      // 将对话框（dialog）的显示状态设置为false，用于关闭相关的弹出框或者抽屉式面板等
      this.dialog = false;
      // 清除之前设置的定时器（timer），可能是用于在某个操作过程中进行定时任务的，比如延迟关闭加载动画等
      clearTimeout(this.timer);
    },


    /**
     * 查询广播公告列表的方法
     */
    getList() {
      // 将加载状态（loading）设置为true，表示正在加载数据，可能用于在页面上显示加载动画或者禁用某些操作按钮
      this.loading = true;
      // 调用listBulletin函数（假设是用于获取广播公告列表的异步操作函数）并传入查询参数（this.queryParams）
      // 然后处理获取到数据后的逻辑
      listBulletin(this.queryParams).then(response => {
        // 将获取到的广播公告列表数据赋值给this.bulletinList，用于在页面上展示公告列表
        this.bulletinList = response.rows;
        // 将获取到的总记录数赋值给this.total，可能用于分页或者显示数据总量相关的操作
        this.total = response.total;
        // 将加载状态（loading）设置为false，表示数据加载完成，隐藏加载动画或者启用之前禁用的操作按钮
        this.loading = false;
        // 将加载状态（load）设置为false，可能用于控制页面上某个加载动画或者按钮的禁用/启用状态
        this.load = false;
        // 将对话框（dialog）的显示状态设置为false，用于关闭相关的弹出框或者抽屉式面板等
        this.dialog = false;
        // 重置查询参数（this.queryParams）为空对象，可能用于下一次查询时使用默认参数或者重新设置查询条件
        this.queryParams = {};
      });
    },


    // 取消按钮对应的操作方法，用于关闭相关弹出框或者重置某些状态
    cancel() {
      // 将open属性设置为false，可能用于控制某个相关的弹出框或者界面元素的显示隐藏状态
      this.open = false;
      // 调用reset方法进行表单重置操作
      this.reset();
    },


    // 表单重置的方法，用于将表单数据恢复到初始状态
    reset() {
      // 将this.form对象的各个属性设置为null或者初始值，以清空表单数据
      this.form = {
        id: null,
        bulletintype: null,
        title: null,
        client: null,
        pushtime: null,
        languagetype: null,
        creationtime: null,
        broadcastcontent: null,
        status: null,
        pushmethod: null
      };
      // 调用resetForm函数（假设是用于重置表单的函数，具体实现可能根据所使用的框架而定）并传入表单名称（"form"）
      this.resetForm("form");
    },


    /**
     * 搜索按钮操作的方法，用于根据当前查询参数进行广播公告列表的查询
     */
    handleQuery() {
      // 将查询参数中的页码（pageNum）设置为1，可能用于在搜索操作后重新从第一页开始显示数据
      this.queryParams.pageNum = 1;
      // 调用getList方法进行广播公告列表的查询操作
      this.getList();
    },


    /**
     * 重置按钮操作的方法，用于重置查询表单并重新进行查询操作
     */
    resetQuery() {
      // 调用resetForm函数（假设是用于重置表单的函数，具体实现可能根据所使用的框架而定）并传入查询表单名称（"queryForm"），以重置查询表单
      this.resetForm("queryForm");
      // 调用handleQuery方法进行重新查询操作
      this.handleQuery();
    },


    // 处理多选框选中数据变化的方法，接收选中的数据（selection）作为参数
    handleSelectionChange(selection) {
      // 从选中的数据中提取每个数据项的id属性，并组成一个新的数组赋值给this.ids，可能用于后续的批量操作（如批量删除等）
      this.ids = selection.map(item => item.id);
      // 判断选中的数据长度是否不等于1，如果不等于1则将this.single设置为true，可能用于控制某些操作按钮（如针对单个数据的操作按钮）的禁用/启用状态
      this.single = selection.length!== 1;
      // 判断选中的数据长度是否为0，如果为0则将this.multiple设置为true，可能用于控制某些操作按钮（如针对多个数据的操作按钮）的禁用/启用状态
      this.multiple =!selection.length;
    },


    /**
     * 新增按钮操作的方法，用于打开新增广播公告的表单并进行相关初始化操作
     */
    handleAdd() {
      // 调用reset方法进行表单重置操作，将表单数据恢复到初始状态
      this.reset();
      // 将open属性设置为true，可能用于控制某个相关的弹出框或者界面元素的显示隐藏状态，这里可能是用于显示新增公告的弹出框
      this.open = true;
      // 设置标题（title）为"添加广播公告"，可能用于在弹出框或者页面的相关位置显示操作标题
      this.title = "添加广播公告";
    },


    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        addBulletin(this.form).then(response => {
          console.log("添加公告时传递的参数：", this.form);
          console.log("参数的类型：", typeof this.form);
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除这条广告么？').then(function() {
        return delBulletin(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('other/bulletin/export', {
        ...this.queryParams
      }, `bulletin_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.demo-drawer__content{
  margin-left: 50px;
}
.aaa{
  margin-left: 1300px;
}
</style>
